<template>
  <div class="container">
    <a-tabs default-active-key="1" @change="goodsTabsChange" :animated="false">
      <a-tab-pane key="1" tab="商品库" forceRender>
        <a-skeleton active :loading="gender == null" :paragraph="{ rows: 8 }">
          <Product
            :unionId="unionId"
            :gender="-1"
            :isEmit="true"
            :addProduct="false"
            :storeIdByLink="storeId"
            :showSpuStock="true"
            :isEmpty="false"
            :weid="weid"
            :weBrand="weBrand"
            @openSimilar="openSimilar"
            @sendProduct="sendProduct"
            @sendLook="sendLook"
          ></Product>
        </a-skeleton>
      </a-tab-pane>
      <a-tab-pane key="2" tab="推荐搭配" forceRender>
        <RecommendLook
          :gender="-1"
          :storeIdByLink="storeId"
          :weid="weid"
          :weBrand="weBrand"
          :unionId="unionId"
          :isEmit="true"
          :isBox="false"
          @sendProduct="sendProduct"
          @sendLook="sendLook"
        ></RecommendLook>
      </a-tab-pane>
    </a-tabs>
    <a-back-top />
  </div>
</template>
<script>
import { lookMixin, sendCardMixin } from './mixin.js'
import Product from '@/views/box/workbench/fashioner/module/product'
import RecommendLook from '@/views/box/workbench/fashioner/module/RecommendLook'

export default {
  mixins: [lookMixin, sendCardMixin],
  components: {
    Product,
    RecommendLook
  },
  data() {
    return {
      // storeId: '',
      gender: null
    }
  },
  mounted() {
    this.gender = -1
  },
  methods: {
    goodsTabsChange(key) {
      console.log(key)
    },
    // 查看推荐LOOK
    showRecommend(item) {
      this.$refs.recommendLookDraw.show(item)
    },
    // 获取storeId
    getStoreId(value) {
      // this.storeId = value
    },
    // 查看相似商品
    openSimilar(item) {},
    // 发送商品，单个——商品库
    sendProduct(item) {
      this.sendcard(item.cover_imgs, item.value, item.weiMoProductId, item.promotionPrice)
    },
    sendLook(item) {
      this.sendLookCard(item.img, item.title, item.id, item.num)
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  padding: 0 24px;
}
/deep/.size-box {
  display: none;
}
/deep/ .ant-pro-pages-list-projects-cardList .ant-card-body {
  min-height: 150px;
}
/deep/.ant-pro-pages-list-projects-cardList .cardItemContent .blue {
  display: none;
}
</style>

